<template>
	<view class="recharge_page">
    <mvBar :mysNavConfig="mysNavConfig"></mvBar>
    <view class="bg-img"><image src="http://wx.xiongmaovip.com/miniapp/static/personal-center/recharge-bg.png"></image></view>
<!--    <view class="header">-->
<!--      <view class="charge-station">-->
<!--        <view class="titile">充值会员：</view>-->
<!--        <view class="station-name">-->
<!--          {{memberName}}-->
<!--        </view>-->
<!--      </view>-->
<!--    </view>-->
    <view class="panel">
      <view class="price-title">充值金额</view>
      <view class="select">
        <view class="list">
          <view @click="selectAmount(item,index)"
                class="item"
                :class="{'active' : currentIndex === index && param.amt === item.text}"
                v-for="(item,index) in priceList" :key="item.id">
            {{item.text}}<text class="unit">元</text>
          </view>
        </view>
        <view class="price-input">
          <view>其他金额</view>
          <view class="ipt"><input type="text" v-model="param.amt" placeholder="输入金额" /></view>
        </view>
        <!-- <view class="amt_item">余额766元。</view> -->
        <view class="amt_item">
          <text class="gift_amt" v-if="param.giftAmt > 0">
            赠送金额
            <text>66元</text>
          </text>
          <text class="real_amt" v-if="param.giftAmt > 0">
            实际到账金额
            <text>88元</text>
          </text>
          <text class="calcGiftAmtStatus" v-if="giftAmtStatus">正在计算赠送金额...</text>
          <view class="calcGiftAmtStatus" style="margin-top: 10rpx;" v-if="activityName">参与活动：无活动</view>
        </view>
      </view>
      <view class="confirm_coupon" @click="confirm_pr()">
        <span>确认支付</span>
      </view>
    </view>
	</view>
</template>

<script>
	import {
		createRechargeOrder,
		miniPay
	} from '@/api/index.js'
  import mvBar from "@/components/mysNavBar";
  import weChatPay from '@/utils/charge-pre-pay.js'
	export default {
    components: {mvBar},
		data() {
			return {
        mysNavConfig: {
          navPadding: true,
          isHome: false,
          navFixed: true,
          navTitle: {
            text: "充值",
            color: "#FFFFFF",
            fontSize: "34upx", // px upx rpx
            fontWeight: "500", // blod
          },
          leftIconPath: '/static/header/back.png',
          // rightIconPath: '/static/header/back-b.png',
        },
				param: {
					memberId: '',
					amt: null,
					giftAmt: 0,
					stationId: '',
				},
				memberName: '',
				activityName: '',
				balanceAmt: 0,
				giftAmtStatus: false,
				giftStatus: true,
				priceData: [{
					id: 1,
					text: 500
				}, {
					id: 2,
					text: 1000
				}, {
					id: 3,
					text: 2000
				}, {
					id: 4,
					text: 3000
				}],
				currentIndex: -1,
				auiLoading: {
					msg: '优惠获取中'
				},
				priceList: [{
						id: 1,
						text: '500'
					},
					{
						id: 2,
						text: '1000'
					},
					{
						id: 3,
						text: '2000'
					},
				],
				indexUnit: 0, // 选中的下标
				unitName: '请选择医院', // 默认选项
				unitList: [{
					id: 1,
					hospital: '南方医院1'
				}, {
					id: 1,
					hospital: '南方医院2'
				}, {
					id: 1,
					hospital: '南方医院3'
				}]
			};
		},
		onLoad(option) {
			this.memberName = option.memberName
			this.param.memberId = option.memberId
			this.param.stationId = option.stationId
		},
		methods: {
			selectAmount(item, ind) {
				this.param.amt = item.text
				this.currentIndex = ind
			},
			confirm_pr() {
				createRechargeOrder(this.param).then(res => {
					console.log(22222, res);
					if (res) {
						let data = {
							stationId: this.param.stationId,
							tradeType: 'RECHARGE_ORDER',
							sourceOrderId: res.orderId,
							payAmt: this.param.amt,
              paidTypeId:3,
              paidTypeName:"微信"
						}
						weChatPay(data).then(res => {
							if (res && res.code == 200) {
								// 预支付成功
								console.log(res, '支付成功')
								uni.navigateBack(0)
							}
						})
					}
				}).catch(error => {
					uni.showModal({
						title: '失败',
						content: error,
						showCancel: true
					})
				})
			},
			// changePickerUnit(e, unitList) {
			// 	console.log(e)
			// 	let index = e.detail.value;
			// 	this.indexUnit = index
			// 	this.unitName = unitList[index].hospital // 这里给展示的text赋值
			// },
		}
	};
</script>

<style lang="scss" scoped>
	.recharge_page {
		padding: 160px 0 0;
    .panel{
      width: 680upx;
      margin: auto;
      padding: 32upx 20upx;
      background: #FFFFFF;
      border-radius: 24upx;
      transform: translateY(-120upx);
    }
    .bg-img{
      width: 100%;
      height: 420upx;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      image{
        width: 100%;
        height: 100%;
      }
    }

		.header {
			// background: #ffffff;
			margin: 16rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 32rpx 0;
			background: url("http://wx.xiongmaovip.com/miniapp/static/personal-center/charge-top-bg.png") center no-repeat;
			border-top-right-radius: 40rpx;
      position: absolute;
      top: 180upx;

			.charge-station {
				display: flex;
				// flex-direction: column;
				// justify-content: center;
				align-items: center;
				width: 100%;

				.titile {
					font-size: 28rpx;
					color: #2d2b2a;
					// margin-bottom: 24rpx;
				}

				.station-name {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.picker {
						width: 100%;
					}

					image {
						width: 28rpx;
						height: 28rpx;
					}
				}
			}

			.right {
				image {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		.price-title {
			font-size: 32rpx;
			font-weight: 500;
			color: #2d2b2a;
			line-height: 48rpx;
			//margin: 40rpx 0rpx 20rpx 0rpx;
		}

		.select {
			// height: 408rpx;
			//padding: 32rpx 32rpx;
			background: #ffffff;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
      margin-top: 32upx;
			margin-bottom: 20rpx;

			.list {
				display: flex;
				justify-content: space-between;
				margin-bottom: 32rpx;

				.item {
					width: 206rpx;
					background: #F8F8F9;
					border-radius: 12rpx;
          border: 1px solid #FFFFFF;
					text-align: center;
					line-height: 112rpx;
          color: #1B1B1B;
          font-weight: 700;
          font-size: 36upx;
          .unit{
            font-weight: normal;
            font-size: 24upx;
            line-height: 112rpx;
            margin-left: 8upx;
          }
				}

				.active {
					color: #006241;
					background: #0062410F;
          border: 1px solid #006241;
				}
			}

			.price-input {
				height: 96rpx;
				background: #f3f5f7;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				display: flex;
				align-items: center;
				padding-left: 32rpx;

				view:nth-child(1) {
					width: 140rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #2d2b2a;
					line-height: 40rpx;
				}

				.ipt {
					// width: 100%;
					line-height: 90rpx;
					margin-left: 20rpx;
				}
			}

			.amt_item {
				margin-top: 24rpx;
				font-size: 28rpx;
				color: #666260;

				.gift_amt {
					text {
						color: red;
					}
				}

				.real_amt {
					text {
						color: red;
					}
				}
			}
		}

		.confirm_coupon {
			width: 100%;
			margin: auto;
			line-height: 80rpx;
			font-size: 28rpx;
			color: white;
			text-align: center;
			background: #006241;
			border-radius: 60upx;
		}
	}
</style>